<template>
    <div class="choice">
        <ul>
            <li v-for="(item,index) in data" :key="index" class="choice-radio" :style="{width:width}">
                <label>
                    <input type="radio" :name="group" class="choice-input" :value="item.value" v-model="select">
                    <div class="choice-item">
                        <i class="le-icon" :class="item.icon" v-if="item.icon"></i>
                        <span :style="{paddingLeft: item.icon ? '8px' : '0'}">{{item.name}}</span>
                    </div>
                </label>
            </li>
        </ul>
    </div>
</template>
<script type="text/javascript">
export default {
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        group: {
            type: [String, Number],
            default: 'choice'
        },
        data: {
            type: Array,
        },
        width: {
            type: String,
            default: "84px"
        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        select: {
            get() {
                return this.value
            },
            set(value) {
                this.$emit('input', value);
            }
        }
    }
};
</script>
<style lang="less" scoped>
@import './choice.less';
</style>